import React, { Component } from 'react';
import '@/assets/css/welcome.css';
import * as echarts from 'echarts';
import url from '@/config/url';
import axios from '@/http/http';
// 引入饼图组件
import Pie from '@/components/Pie'

class Welcome extends Component {
    state = {
        accessFrom: [],
        area: [],
        gender: []
    }
    render() {
        const { accessFrom, area, gender } = this.state
        return (
            <div id='main' style={{ display: 'flex' }}>
                {/* 通过父子组件传参的形式将数据传给饼图组件,饼图组件渲染 */}
                <Pie id='pie1' w='33.3%' h='600px' data={accessFrom} text='搜索引擎占比' legend={false} subtitle='搜索引擎' ></Pie>
                <Pie id='pie2' w='33.3%' h='600px' data={area} text='区域占比' legend={true} subtitle='区域'></Pie>
                <Pie id='pie3' w='33.3%' h='600px' data={gender} text='性别占比' legend={true} subtitle='性别'></Pie>
            </div>
        );
    };
    componentDidMount() {
        // 发起数据请求,
        axios.get(url.getpiedata).then(res => {
            console.log(res);
            this.setState({
                accessFrom: res.data.data.accessFrom,
                area: res.data.data.area,
                gender: res.data.data.gender,
            })
        })

    }
}

export default Welcome;
